<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-pie-chart"></i> 考试成绩图表
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <!--            <div class="plugins-tips">-->
      <!--                vue-schart：vue.js封装sChart.js的图表组件。-->
      <!--                访问地址：-->
      <!--                <a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>-->
      <!--            </div>-->
      <div class="schart-box">
        <div class="content-title">成绩阶段分布图</div>
        <div class="handle-box">
          <el-select v-model="subjectSearch" placeholder="课程" class="handle-select mr10">
            <el-option v-for="item in subjects"
                       :key="item.subjectName"
                       :label="item.subjectName"
                       :value="item.id"></el-option>
          </el-select>
          <!--        <el-input v-model="subjectSearch" placeholder="课程名称" class="handle-input mr10"></el-input>-->
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        </div>
        <schart class="schart" canvasId="line" :options="options2"></schart>
      </div>
      <div class="schart-box" style="margin-right: 20%">
        <div class="content-title">平均成绩构成图</div>
        <schart class="schart" canvasId="bar" :options="options1"></schart>
      </div>
      <!--            <div class="schart-box">-->
      <!--                <div class="content-title">饼状图</div>-->
      <!--                <schart class="schart" canvasId="pie" :options="options3"></schart>-->
      <!--            </div>-->
      <!--            <div class="schart-box">-->
      <!--                <div class="content-title">环形图</div>-->
      <!--                <schart class="schart" canvasId="ring" :options="options4"></schart>-->
      <!--            </div>-->
    </div>
  </div>
</template>

<script>
import Schart from "vue-schart";
import {gradCharts, selectMySubjectByParam} from "../api/index";

export default {
  name: "basecharts",
  components: {
    Schart,
  },
  data() {
    return {
      options1:{
        type: "bar",
        title:"平均成绩构成图",
        bgColor: "#fbfbfb",
        labels: ["java", "html", "vue", "数据结构", "数据库"],
        datasets: [
          {
            label: '考试平均成绩',
            fillColor: "rgba(241, 49, 74, 0.5)",
            data: [76.3, 78.2, 68.6, 90.1, 87.4],
          },
          {
            label: "表现平均成绩",
            data: [80.3, 82.3, 70.6, 79.9, 90.7],
          },
          {
            label: "总平均成绩",
            data: [67.1, 70.4, 89.5, 90.6, 86.8],
          },
        ],
      },
      options2 : {
        type: "line",
        title:"考试成绩分布图",
        bgColor: "#fbfbfb",
        labels: ["未及格", "60-64", "65-69", "70-74", "75-79", "80-84", "85-90", "90-94", "90-100"],
        datasets: [
          {
            label: "人数",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
          }
        ],
      },
      subjectSearch:'',
      subjects:[],
    }
  },
  methods:{
    queryChart2(){
      gradCharts().then(res => {
        if(res.code === '200'){
          this.options2.datasets[0].data = res.data;
        }
      })
    },
    handleSearch() {
      gradCharts({subjectId:this.subjectSearch}).then(res => {
        if(res.code === '200'){
          this.options2.datasets[0].data = res.data;
        }
      })
    },
    querySubject(){
      selectMySubjectByParam().then(res => {
        if (res.code === '200') {
          this.subjects = res.data;
          this.$message.success("查询成功");
        } else {
          this.$message.error(res.message);
        }
      })
    }
  },
  mounted() {
    this.queryChart2();
    this.querySubject();
  }

};
</script>

<style scoped>
.schart-box {
  display: inline-block;
  margin-left: 25%;
}
.handle-box {
  margin-bottom: 20px;
}

.schart {
  width: 700px;
  height: 400px;
}

.content-title {
  clear: both;
  font-weight: 400;
  line-height: 50px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}
</style>